---
group: 'components'
category: 'state'
title: Group
description: 'Vertically centered flex box.'
order: 1
---

## Basic Usage

Based on the flexbox layout, the default vertical direction is centered, and the horizontal direction can be customized.

```js live=true
<Group>
  <Button>1</Button>
  <Button>2</Button>
  <Button>3</Button>
</Group>
```

## Position

Use Position to set the horizontal alignment.

```js live=true
<>
<Group position="center">
  <Button>1</Button>
  <Button>2</Button>
  <Button>3</Button>
</Group>
<Group position="right">
  <Button>1</Button>
  <Button>2</Button>
  <Button>3</Button>
</Group>
</>
```

## Spacing

Use spacing to set the spacing between elements in the horizontal direction

```js live=true
<>
  <Group position="center" spacing="xl">
    <Button>1</Button>
    <Button>2</Button>
    <Button>3</Button>
  </Group>
  <Group position="center" spacing={100} style={{ marginTop: '40px' }}>
    <Button>1</Button>
    <Button>2</Button>
    <Button>3</Button>
  </Group>
</>
```

## Direction

Use direction to set the arrangement direction of the elements, consistent with the flex-direction attribute parameter.

```js live=true
<Group direction="row-reverse">
  <Button>1</Button>
  <Button>2</Button>
  <Button>3</Button>
</Group>
```

## Grow

The grow setting element occupies the entire row.

```js live=true
<Group grow>
  <Button>1</Button>
  <Button>2</Button>
  <Button>3</Button>
</Group>
```
